<template>
  <div style="background-color: #fcfcfc;padding: 10px 30px 30px 30px; text-align: center">
    <table-msg v-if="checkPermission(permission.permissionGet)"
                ref="tableMsg"
               :insert-button="true"
               insertButtonText="添加权限"
               :request_value="request_value"
               :columns="columns"
               @insert="insertPermissionHandler"
               @update="updatePermissionHandler"
               @delete="deletePermissionHandler"
               @info="infoPermissionHandler"
               @Reset="resetPermissionHandler"
    />
    <InsertPermissionForm ref="insertPermissionForm" @change-msg="getPermissionTree"/>
    <ModifyPermissionForm ref="modifyPermissionForm" @change-msg="getPermissionTree"/>
    <PermissionDetail ref="permissionDetail"/>
  </div>
</template>

<script>
import { checkPermission, permission } from '@/utils/permission'
import TableMsg from '@/components/table/TableMsg'
import { ref } from 'vue'
import { deletePermission, getPermissionTree, resetPermission } from '@/api/permission'
import InsertPermissionForm from '@/views/permission/permission/form/InsertPermissionForm'
import ModifyPermissionForm from '@/views/permission/permission/form/ModifyPermissionForm'
import PermissionDetail from '@/views/permission/permission/detail/PermissionDetail'
export default {
  name: 'PermissionViews',
  components: { PermissionDetail, ModifyPermissionForm, InsertPermissionForm, TableMsg },
  setup () {
    const columns = [
      { prop: 'name', label: '权限名' },
      { prop: 'code', label: '权限代码' },
      { prop: 'status', label: '状态', type: 'status', status: ['ENABLE', 'DELETED'], tag: [0, 2] },
      { prop: 'option', label: '操作', type: 'option', width: 340, option: { info: true, update: true, delete: true, reset: true } }
    ]
    return {
      columns,
      permission: permission(),
      request_value: ref({})
    }
  },
  methods: {
    checkPermission (val) {
      return checkPermission(val)
    },
    getPermissionTree () {
      getPermissionTree().then((val) => {
        this.request_value = val
      })
    },
    insertPermissionHandler () {
      console.log('haha')
      this.$refs.permissionDetail.data = {}
      this.$refs.insertPermissionForm.dialogVisible = true
    },
    updatePermissionHandler (value) {
      this.$refs.modifyPermissionForm.getPermission(value.id)
      this.$refs.modifyPermissionForm.dialogVisible = true
    },
    deletePermissionHandler (permission) {
      deletePermission(permission).then((val) => {
        this.getPermissionTree()
        console.log(val)
      })
    },
    infoPermissionHandler (permission) {
      console.log('info')
      this.$refs.permissionDetail.data = permission
      this.$refs.permissionDetail.dialogVisible = true
    },
    resetPermissionHandler (permission) {
      resetPermission(permission).then(value => {
        this.getPermissionTree()
        console.log(value)
      })
    }
  },
  mounted () {
    this.getPermissionTree()
  }
}
</script>

<style scoped>

</style>
